<template>
  <div class="app-container">
    <div class="p4">
      <FaSearchBar :show-toggle="false">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
        <#list table.fields as f>
        <#if f.queryType?? && f.queryType != ''>
        <el-form-item label="${f.fieldComment}" prop="${f.javaFieldName}">
          <el-input v-model="queryParams.${f.javaFieldName}" placeholder="请输入${f.fieldComment}" clearable style="width: 150px"
            @keyup.enter="handleQuery" />
        </el-form-item>
        </#if>
        </#list>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      </FaSearchBar>
      <el-divider border-style="dashed" style="margin:0px 0px 20px 0px" />

      <el-space wrap>
		<el-button type="primary" icon="Plus" @click="handleAdd" v.auth="['${table.sign}$add']">新增</el-button>
		<el-button type="danger" icon="Delete" :disabled="multiple" @click="handleDelete" v.auth="['${table.sign}$remove']">删除</el-button>
		<el-button type="warning" icon="Download" @click="handleExport" v.auth="['${table.sign}$export']">导出</el-button>
      </el-space>

      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange" stripe highlight-current-row border class="mt4">
        <el-table-column type="selection" width="55" align="center" />
        <#list table.fields as f>
        <#if f.isList?? && f.isList == '1'>
        <el-table-column label="${f.fieldComment}" align="center" prop="${f.javaFieldName}" />
        </#if>
        </#list>
        <el-table-column align="center" width="200px" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button size="small" plain type="success" icon="Edit" @click="handleUpdate(scope.row)" v.auth="['${table.sign}$edit']">修改
            </el-button>
            <el-button size="small" plain type="danger" icon="Delete" @click="handleDelete(scope.row)"v.auth="['${table.sign}$remove']">删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="loadData" />
    </div>
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="${table.classNameLowerFirst}Ref" :model="form" :rules="rules" label-width="80px">
        <#list table.fields as f>
          <#if (f.isInsert?? && f.isInsert == '1') || (f.isEdit?? && f.isEdit == '1')>
            <el-form-item label="${f.fieldComment}" prop="${f.javaFieldName}">
              <el-input v-model="form.${f.javaFieldName}" placeholder="请输入${f.fieldComment}" />
            </el-form-item>
          </#if>
        </#list>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="${table.className}">
import api${table.className} from "@/api/<#if table.moduleName??>${table.moduleName}/</#if>${table.classNameLowerFirst}";

import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
<#if table.dictCodes??>
const { <#list table.dictCodes as dc>${dc}<#if dc?has_next>,</#if></#list> } = proxy.useDict(<#list table.dictCodes as dc>"${dc}"<#if dc?has_next>,</#if></#list>);
</#if>
const dataList = ref([]);
const open = ref(false);
const loading = ref(false);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    <#list table.fields as f>
    <#if f.queryType?? && f.queryType != ''>
    ${f.javaFieldName}: undefined,
    </#if>
    </#list>
  },
  rules: {
    <#list table.fields as f><#if f.isRequired?? && f.isRequired == '1'>
    ${f.javaFieldName}: [{ required: true, message: "${f.fieldComment}不允许为空", trigger: "blur" }],
    </#if></#list>
  }
});

const { queryParams, form, rules } = toRefs(data);


/**
 * 加载数据
 */
function loadData() {
  // loading.value = true;
  api${table.className}.page(queryParams.value).then(response => {
    dataList.value = response.data.rows;
    total.value = response.data.total;
    // loading.value = false;
  });
}

/**
 * 关闭窗口
 */
function cancel() {
  open.value = false;
  reset();
}

/**
 * 重置表单
 */
function reset() {
  form.value = {
    <#list table.fields as f><#if (f.isInsert?? && f.isInsert == '1') || (f.isEdit?? && f.isEdit == '1')>
    <#if f.defaultValue?? && f.defaultValue != ''>${f.javaFieldName}: '${f.defaultValue}',<#else>${f.javaFieldName}: undefined,</#if>
    </#if></#list>
  };
  proxy.resetForm("${table.classNameLowerFirst}Ref");
}

/**
 * 搜索
 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  loadData();
}

/**
 * 重置查询表单
 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/**
 * 选中操作
 * @param selection 选中数据
 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/**
 * 新增操作
 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "新增${table.tableComment}";
}

/**
 * 更新操作
 * @param row 数据行
 */
function handleUpdate(row) {
  reset();
  const id = row.id || ids.value;
  api${table.className}.getById(id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改${table.tableComment}";
  });
}

/**
 * 提交${table.tableComment}数据
 */
function submitForm() {
  proxy.$refs["${table.classNameLowerFirst}Ref"].validate(valid => {
    if (valid) {
      if (form.value.id != undefined) {
        api${table.className}.update(form.value).then(response => {
          proxy.$modal.success("修改成功");
          open.value = false;
          loadData();
        });
      } else {
        api${table.className}.add(form.value).then(response => {
          proxy.$modal.success("新增成功");
          open.value = false;
          loadData();
        });
      }
    }
  });
}

/**
 * 删除${table.tableComment}数据
 * @param row 数据行
 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal.confirm('是否确认删除${table.tableComment}编号为"' + _ids + '"的数据项？').then(function () {
    return api${table.className}.delete(_ids);
  }).then(() => {
    loadData();
    proxy.$modal.success("删除成功");
  }).catch(() => { });
}

/**
 * 导出Excel
 */
function handleExport() {
  api${table.className}.download(queryParams.value,"${table.tableComment}");
}

loadData();
</script>
